// var navPath = document.querySelector('.navPath');
// navPath.innerHTML = ' ';
// var nav_arr =  goodData.path;
// nav_arr.forEach(function(item,index){
//     if(index === nav_arr.length - 1){
//         var a = document.createElement('a')
//         a.innerText = item.title
//         navPath.appendChild(a)
//     }else{
//         var a = document.createElement('a')
//         var span =document.createElement('span')
//         a.href = item.url
//         a.innerText = item.title
//         span.innerText = '/'
//         navPath.appendChild(a)
//         navPath.appendChild(span)
//     }
// })
navFn();
function navFn() {
    var navPath = document.querySelector('.navPath');
    navPath.innerHTML = ' ';
    var nav_arr = goodData.path;
    navPath.innerHTML = goodData.path.map((item, index) => {
        if (index === nav_arr.length - 1) {
            return `<a>${item.title}</a>`
        } else {
            return `<a href="${item.url}">${item.title}</a><span>/</span>`
        }
    }).join(' ')
}

glassFn();
function glassFn() {
    var view = document.querySelector('.leftTop')
    var right_box = document.querySelector('.bigBigPic')
    var cover = document.querySelector('.mask')
    var img = document.querySelector('.bigBigPic img')
    view.onmouseover = function () {
        cover.style.display = 'block'
        right_box.style.display = 'block'
        view.onmousemove = function (e) {
            var mouseX = e.pageX - this.offsetLeft
            var mouseY = e.pageY - this.offsetTop
            cover.style.left = mouseX - cover.offsetWidth / 2 + 'px'
            cover.style.top = mouseY - cover.offsetHeight / 2 + 'px'
            var min_x = 0
            var min_y = 0
            var max_x = this.clientWidth - cover.offsetWidth
            var max_y = this.clientHeight - cover.offsetHeight
            var currentX = cover.offsetLeft
            var currentY = cover.offsetTop
            currentX = currentX <= min_x ? min_x : currentX
            currentY = currentY <= min_y ? min_y : currentY
            if (currentX >= max_x) {
                currentX = max_x
            } else {
                currentX = currentX
            }
            if (currentY >= max_y) {
                currentY = max_y
            } else {
                currentY = currentY
            }
            cover.style.left = currentX + 'px'
            cover.style.top = currentY + 'px'
            img.style.left = -currentX / this.offsetWidth * img.offsetWidth + 'px'
            img.style.top = -currentY / this.offsetHeight * img.offsetHeight + 'px'
        }
        view.onmouseout = function () {
            cover.style.display = 'none'
            right_box.style.display = 'none'
            view.onmousemove = null
            view.onmouseout = null
        }
    }
}

imgListReader()
function imgListReader() {
    var imgArr = goodData.imagessrc;
    var picsWrap_list = document.querySelector('.picsWrap ul')
    picsWrap_list.innerHTML = ' ';
    for (var i = 0; i < imgArr.length; i++) {
        var li = document.createElement('li')
        var img = document.createElement('img')
        img.src = imgArr[i].s
        li.appendChild(img)
        picsWrap_list.appendChild(li)
    }
}

imgTab()
function imgTab() {
    var imgArr = goodData.imagessrc
    var btns = document.querySelectorAll('.leftBttom a')
    var list = document.querySelector('.picsWrap ul')
    var lis = document.querySelectorAll('.picsWrap ul li')
    var sImg = document.querySelector('.bigPic img')
    var bImg = document.querySelector('.bigBigPic img')
    var index = 0
    btns[0].onclick = function () {
        index--
        // 一个li单位的宽度 li单位的外边距
        var onceL = (lis[0].offsetWidth + 20) * 2
        if (index < 0) {
            list.style.marginLeft = 0;
            index = 0
        } else {
            list.style.marginLeft = - onceL * index + 'px';
        }
    }

    btns[1].onclick = function () {
        index++
        // 一个li单位的宽度 li单位的外边距
        var onceL = (lis[0].offsetWidth + 20) * 2
        if (index * 2 > lis.length - 5) {
            list.style.marginLeft = - (lis[0].offsetWidth + 20) * (lis.length - 5) + 'px';
            index--
        } else {
            list.style.marginLeft = - onceL * index + 'px';
        }
    }

    lis.forEach(function (item, index) {
        item.onclick = function () {
            //点击时
            sImg.src = imgArr[index].s
            bImg.src = imgArr[index].b
        }
    })
}

contRender()
function contRender() {
    var data = goodData.goodsDetail;
    var str = `
    <h3>${data.title}</h3>
    <p class="pOne">${data.recommend}</p>
    <div class="priceWrap">
        <div class="priceTop">
            <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
            <div class="price">
                <span>￥</span>
                <p>${data.price}</p>
                <i>降价通知</i>
            </div>
            <p class="pR">
                <span>累计评价</span>
                <span>${data.evaluateNum}</span>
            </p>
        </div>
        <div class="priceBottom">
            <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
            <p><span>${data.promoteSales.type}</span>
                <span>${data.promoteSales.content}</span>
            </p>
        </div>
    </div>
    <div class="support">
        <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
        <p>${data.support}</p>
    </div>
    <div class="address">
        <span>配&nbsp;送&nbsp;至</span>
        <p>${data.address}</p>
    </div>
</div>
<div class="rightBttom">
    <div class="choosed"></div>
    <div class="chooseWrap">
        <dl>
            <dt>选择颜色</dt>
            <dd>金色</dd>
            <dd>银色</dd>
            <dd>黑色</dd>
        </dl>
        <dl>
            <dt>内存容量</dt>
            <dd>16G</dd>
            <dd>64G</dd>
            <dd>128G</dd>
            <dd>256G</dd>
        </dl>
        <dl>
            <dt>选择版本</dt>
            <dd>公开版</dd>
            <dd>移动版</dd>
        </dl>
        <dl>
            <dt>购买方式</dt>
            <dd>官方标配</dd>
            <dd>优惠移动版</dd>
            <dd>电信优惠版</dd>
        </dl>
    </div>
    <div class="addcart">
        <div class="count">
            <input type="text">
            <a href="#">+</a>
            <a href="#">-</a>
        </div>
        <button>加入购物车</button>
    </div>`;
    var rightTop = document.querySelector('.rightTop');
    rightTop.innerHTML = str;
    // 初始化配置内容
    var chooseWrap = document.querySelector('.chooseWrap');
    chooseWrap.innerHTML = '';
    // 获取dl数据
    var dlArr = data.crumbData;
    var dlStr = '';
    // innerHTML修改添加元素
    dlArr.forEach(function (item, index) {
        dlStr += `
            <dl index = "${index}">
                <dt>
                    ${item.title}
                </dt>
        `;
        item.data.forEach(function (ddItem, ddIndex) {
            dlStr += `
                <dd cp="${ddItem.changePrice}">
                    ${ddItem.type}
                </dd>
            `;
        })
        dlStr += '</dl>';
    })
    chooseWrap.innerHTML = dlStr;
}

ddClick()
function ddClick() {
    // 获取选择标签dd
    var aDd = document.querySelectorAll('.chooseWrap dd')
    console.log(aDd);
    // 创建一个价格数组
    var priceArr = [0, 0, 0, 0]
    // 遍历获取dd的数组
    aDd.forEach(function (item, index) {
        // 给每一个dd创建点击时间
        item.onclick = function () {
            // 获取
            var oDl = this.parentNode
            var aDds = oDl.querySelectorAll('dd')
            aDds.forEach(function (item, index) {
                item.style.color = '#666'
            })
            this.style.color = 'red'
            // 修改保存pirceArr的值 - 获取点击的dd所在dl的索引
            var i = oDl.getAttribute('index')
            priceArr[i] = {
                price: this.getAttribute('cp'),
                text: this.innerText
            }
            var price = goodData.goodsDetail.price
            console.log(priceArr);

            for (var i = 0; i < priceArr.length; i++) {
                if (priceArr[i]) {
                    price += Number(priceArr[i].price)
                }
            }
            var priceBox = document.querySelector('.price p')
            priceBox.innerHTML = price
            // 获取到需要添加的元素内容
            var choosed = document.querySelector('.choosed')
            //清空

            choosed.innerHTML = ' '
            priceArr.forEach(function (item, index) {
                if (item) {
                    var oSpan = document.createElement('span')
                    oSpan.innerHTML = `
                        ${item.text}
                        <i index="${index}" cp="${item.price}">X<i>
                    `
                    choosed.appendChild(oSpan)
                }
            })
            //给X添加删除事件
            var aX = document.querySelectorAll('.choosed i')
            aX.forEach(function (item, index) {
                item.onclick = function () {
                    var oPar = this.parentNode
                    oPar.remove()
                    //修改数组里面的值 = 0
                    var num = this.getAttribute('index')
                    priceArr[num] = 0

                    // 把dd的值变为初始化状态
                    // 
                    var aDl = document.querySelectorAll('.chooseWrap dl')
                    var aDd = aDl[num].querySelectorAll('dd')
                    aDd.forEach(function (item, index) {
                        item.style.color = '#666'
                    })
                    aDd[0].style.color = 'red'

                    // 修改价格 - 点那个X按钮 按钮上应该有对应的价格修改值
                    var cNum = this.getAttribute('cp')
                    price -= cNum
                    var priceBox = document.querySelector('.price p')
                    priceBox.innerHTML = price
                    console.log(price);
                    chooseAddFn();
                }
            })
            chooseAddFn();
        }
    })
}

chooseAddFn()
function chooseAddFn(){
    // 先拿到price的值 再去修改
    // 获取选择搭配-左侧价格元素
    var lpriceBox = document.querySelector('.goods_r_t_list .left p')
    var priceNumTop = Number(document.querySelector('.price p').innerHTML)
    lpriceBox.innerHTML = '￥'+priceNumTop;
    var priceNum = Number(document.querySelector('.goods_r_t_list .left p').innerHTML.slice(1))
    var chooseFewNum = Number(document.querySelector('.goods_r_t_list .right div').innerHTML.slice(2,1))
    var chooseFew = document.querySelector('.goods_r_t_list .right div')
    console.log(chooseFewNum);
    var aInp = document.querySelectorAll('.middle input')
    var endPrice = document.querySelector('.goods_r_t_list .right i')
    console.log(priceNum);
    console.log(endPrice);
    aInp.forEach(function(item,index){
        item.onchange = function(){
            if(this.checked === true){
                priceNum += Number(this.value)
                chooseFewNum ++
            }else{
                priceNum -= Number(this.value)
                chooseFewNum --
            }
            endPrice.innerHTML = '¥' + priceNum
            chooseFew.innerHTML = '已购'+chooseFewNum+'件商品'
        }
        if(item.checked){
            priceNum+=Number(item.value);
        }
    })
    endPrice.innerHTML = '￥' + priceNum;
}

leftTab();
function leftTab() {
    //获取点击按钮的区域
    var tabBtns = document.querySelectorAll('.goods_l .goods_l_t >h4')
    //获取内容切换的区域
    var tabCont = document.querySelectorAll('.goods_l .goods_l_b >div')

    tab(tabBtns, tabCont);  
}

rightTab();
function rightTab() {
    //获取点击按钮的区域
    var tabBtns = document.querySelectorAll('.goods_r_b .tabBtns >li')
    //获取内容切换的区域
    var tabCont = document.querySelectorAll('.goods_r_b .tabConts >div')

    tab(tabBtns, tabCont);  
}

function tab(tabBtns, tabCont) {
    //遍历tabBtns
    for (var i = 0; i < tabBtns.length; i++) {
        tabBtns[i].index = i;
        tabBtns[i].onclick = function () {
            //其他元素 移出 active
            for (var j = 0; j < tabBtns.length; j++) {
                tabBtns[j].className = '';
                tabCont[j].className = '';
            }
            //点击的元素 添加active
            this.className = 'active';
            tabCont[this.index].className = 'active'
        }
    }
}
